import React, { useState, useMemo, useEffect } from 'react';
import { d_sort, Bar, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, BtTxt, PanelFind, loc } from 'sui';
import { ToolView } from './tool';
import { useAccess } from 'cache';
import { load_tech } from 'task/cmd';

const TechView = () => {
    const [main, setMain] = useState();
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd();

    useEffect(() => {
        load_tech(v => {
            d_sort(v, "sn");
            v.forEach((d, i) => d["index"] = i + 1);
            setMain(v);
        });
    }, []);

    const getRow = useMemo(() => {
        const lst = ["sn"];
        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter]);

    const hreturn = () => {
        umd.hreturn();
    };

    if (umd.isFin("tool")) {
        return <ToolView cur={umd.cur} hreturn={hreturn} no_acc={no_acc}/>;
    }

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_132"), key: 'sn', width: 160},
        {name: loc("l_131"), key: 'st', width: 70, formatter: (props) => {
            // const d = props.row;

            let cl = "green";
            let flag = loc("l_368");

            return <Bar flag={flag} cl={cl}/>;
        }},
        {name: loc("l_238"), key: 'e_opt', width: 80, formatter: (props) => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(null, d, "tool")}>{loc("l_148")}</BtTxt>
                </div>
            );
        }},
    ];

    return (
        <MainView>
            <PanelFind left={loc("l_144")} hcmd={v => umd.setFilter(v)}/>
            <GridTable col={col} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {TechView};
